<template>
    <div>
        <div class="intr border-bottom" @click="handleIntrClick"
        >
            <p class="title">景点简介</p>
            <p class="inner">开放时间、贴士</p>
            <span class="iconfont right">&#xe633;</span>
        </div>
        <common-introduce
        :list="list"
        v-show="showIntroduce"
        @close="handleIntrClose"
        ></common-introduce>
    </div>
</template>

<script>
import CommonIntroduce from 'common/introduce/introduce'
export default {
    name: 'DetailIntr',
    components: {
        CommonIntroduce
    },
    props: {
        list: [Array, Object]
    },
    data () {
        return {
            showIntroduce: false
        }
    },
    methods: {
        handleIntrClick () {
            this.showIntroduce = true
            this.$emit('change')
        },
        handleIntrClose () {
            this.showIntroduce = false
            this.$emit('show')
        }
    }
}
</script>

<style lang="stylus" scoped>
    .intr
        position relative
        width 100%
        height 1.2rem
        font-size .3rem
        background-color #fff
        .title
            padding .2rem 0 .2rem .4rem
        .inner
            padding .1rem 0 .2rem .4rem
            font-size .18rem
            color #888
        .right
            position absolute
            bottom .35rem
            right 0
            font-size .4rem
            padding-right .2rem
</style>
